<script setup>

import api from './api.js'
import { useRouter } from "vue-router";
import eventbus from "@/utils/eventbus.js";

const router = useRouter();
const { proxy } = getCurrentInstance();

const openFlag = ref(false);

  const content = reactive({
    draft: 0,
    normal: 0,
    loss: 0,
    over: 0
  });

  let inventoryId = null;

  function getTipValue(name, data) {
    const one = data.find(item=>item.name === name);
    if (one) {
      return one.value;
    }
    return 0;
  }

  function getContent(id) {
    api.getTipContent(id).then((data)=> {
      content.draft = getTipValue("0", data);
      content.normal = getTipValue("1", data);
      content.loss = getTipValue("2", data);
      content.over = getTipValue("3", data);
    });
  }

  function open(id) {
    getContent(id);
    inventoryId = id;
    openFlag.value = true;
  }

  function close() {
    openFlag.value = false;
  }

  function confirm() {
    api.sub(inventoryId).then(data=> {

      proxy.$tab.closePage();
      router.push('/consume/consumeInventoryCheck');
      eventbus.publish('after-inventory');

    })
  }

  // 外部使用的属性或方法
  defineExpose({
    open
  })

</script>

<template>
  <div>
    <el-dialog width="300" title="提示" v-model="openFlag" align-center top="50">
      <el-row style="margin-bottom: 25px;">
        <el-col :span="12">
          未盘：<span style="color: #E6A23C;">{{content.draft}}</span>
        </el-col>
        <el-col :span="12">
          正常：<span style="color: #67C23A;">{{content.normal}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 25px;">
        <el-col :span="12">
          盘亏：<span style="color: #f56c6c;">{{content.loss}}</span>
        </el-col>
        <el-col :span="12">
          盘盈：<span style="color: #f56c6c;">{{content.normal}}</span>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>